<template>
  <div class="edit-page-input">
    <div class="margin-bottom-15">基本信息 <edit-button :on-click="handleClick"></edit-button></div>
    <div class="edit-page-context">
      <!--      <div class="photo-albums">
        <photo-albums />
      </div>-->
      <div class="edit-page-context-data margin-left-50">
        <template v-if="monitorType == 'airtype'">
          <el-form ref="elForm">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="站点名称" prop="pointName">
                  <div class="no-wrap">{{ queryObj.pointName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="address">
                  <div class="no-wrap">{{ queryObj.address }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="所属区域" prop="areaCode">
                  <div class="no-wrap">{{ queryObj.areaCode }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中心经度" prop="longitude">
                  <div class="no-wrap">{{ queryObj.longitude }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="中心纬度" prop="latitude">
                  <div class="no-wrap">{{ queryObj.latitude }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标准级别" prop="standLevelCode">
                  <div class="no-wrap">{{ queryObj.standLevelCode }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="覆盖面积" prop="coverage">
                  <div class="no-wrap">{{ queryObj.coverage }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="功能区类型" prop="functionTypeCode">
                  <div class="no-wrap">{{ queryObj.functionTypeCode }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="建设日期" prop="buildDate">
                  <div class="no-wrap">{{ queryObj.buildDate }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人" prop="linkMan">
                  <div class="no-wrap">{{ queryObj.linkMan }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="联系电话" prop="linkPhone">
                  <div class="no-wrap">{{ queryObj.linkPhone }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销状态" prop="logoutStatus">
                  <div class="no-wrap">{{ queryObj.logoutStatus == 0 ? '否' : '是' }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template v-else-if="monitorType == 'noisetype'">
          <el-form ref="elForm">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="站点名称" prop="pointName">
                  <div class="no-wrap">{{ queryObj.pointName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="中心经度" prop="longitude">
                  <div class="no-wrap">{{ queryObj.longitude }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中心纬度" prop="latitude">
                  <div class="no-wrap">{{ queryObj.latitude }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="联系人" prop="linkMan">
                  <div class="no-wrap">{{ queryObj.linkMan }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="linkPhone">
                  <div class="no-wrap">{{ queryObj.linkPhone }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="建设日期" prop="buildDate">
                  <div class="no-wrap">{{ queryObj.buildDate }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销状态" prop="logoutStatus">
                  <div class="no-wrap">{{ queryObj.logoutStatus == 0 ? '否' : '是' }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template v-else-if="monitorType == 'watertype'">
          <el-form ref="elForm">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="站点名称" prop="pointName">
                  <div class="no-wrap">{{ queryObj.pointName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="中心经度" prop="longitude">
                  <div class="no-wrap">{{ queryObj.longitude }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中心纬度" prop="latitude">
                  <div class="no-wrap">{{ queryObj.latitude }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="断面名称" prop="sectionName">
                  <div class="no-wrap">{{ queryObj.sectionName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属流域" prop="basinName">
                  <div class="no-wrap">{{ queryObj.basinName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="水质级别" prop="waterLevelName">
                  <div class="no-wrap">{{ queryObj.waterLevelName }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="隶属区域" prop="basinName">
                  <div class="no-wrap">{{ queryObj.areaName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="联系人" prop="linkMan">
                  <div class="no-wrap">{{ queryObj.linkMan }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="linkPhone">
                  <div class="no-wrap">{{ queryObj.linkPhone }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="建设日期" prop="buildDate">
                  <div class="no-wrap">{{ queryObj.buildDate }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销状态" prop="logoutStatus">
                  <div class="no-wrap">{{ queryObj.logoutStatus == 0 ? '否' : '是' }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template v-else-if="monitorType == 'smoketype'">
          <el-form ref="elForm">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="站点名称" prop="pointName">
                  <div class="no-wrap">{{ queryObj.pointName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="中心经度" prop="longitude">
                  <div class="no-wrap">{{ queryObj.longitude }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中心纬度" prop="latitude">
                  <div class="no-wrap">{{ queryObj.latitude }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="联系人" prop="linkMan">
                  <div class="no-wrap">{{ queryObj.linkMan }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="linkPhone">
                  <div class="no-wrap">{{ queryObj.linkPhone }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="建设日期" prop="buildDate">
                  <div class="no-wrap">{{ queryObj.buildDate }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销状态" prop="logoutStatus">
                  <div class="no-wrap">{{ queryObj.logoutStatus == 0 ? '否' : '是' }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template v-else-if="monitorType == 'dusttype'">
          <el-form ref="elForm">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="站点名称" prop="pointName">
                  <div class="no-wrap">{{ queryObj.pointName }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="中心经度" prop="longitude">
                  <div class="no-wrap">{{ queryObj.longitude }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="中心纬度" prop="latitude">
                  <div class="no-wrap">{{ queryObj.latitude }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="联系人" prop="linkMan">
                  <div class="no-wrap">{{ queryObj.linkMan }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="linkPhone">
                  <div class="no-wrap">{{ queryObj.linkPhone }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="建设日期" prop="buildDate">
                  <div class="no-wrap">{{ queryObj.buildDate }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销状态" prop="logoutStatus">
                  <div class="no-wrap">{{ queryObj.logoutStatus == 0 ? '否' : '是' }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoShow',
  props: {
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    },
    // 编辑点击
    onEditClick: {
      type: Function,
      default: () => {}
    },
    queryObj: {
      type: Object,
      default() {
        return {
          pointName: undefined,
          address: undefined,
          areaCode: undefined,
          longitude: undefined,
          latitude: undefined,
          standLevelCode: undefined,
          coverage: undefined,
          functionTypeCode: undefined,
          buildDate: undefined,
          linkMan: undefined,
          linkPhone: undefined,
          logoutStatus: 1,
          sectionName: undefined,
          basinName: undefined,
          waterLevelName: undefined,
          areaName: undefined
        }
      }
    }
  },
  methods: {
    handleClick() {
      this.onEditClick(this.queryObj)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
